import Vue from "vue";

let drag_resize_update = (el, binding, vnode) => {
  // 获取dialog元素
  let dlg: any = el.getElementsByClassName("el-dialog")[0];
  vnode.context.$nextTick(() => {
    dlg.parentNode.className = `${dlg.parentNode.className} bf-drag bf-resize`;
  });
};

Vue.directive('bf-drag', {
  bind(el, binding, vnode) {
    // 获取对应的dialog和header元素，并设置相关样式
    let dlg = el.getElementsByClassName("el-dialog")[0];
    let header = el.getElementsByClassName("el-dialog__header")[0];

    header.style.userSelect = "none";
    header.style["-ms-user-select"] = "none";
    header.style["-moz-user-select"] = "none";
    header.style.cursor = "default";
    dlg.offsetX = 0;
    dlg.offsetY = 0;

    // 添加并监听drag相关移动事件
    let move = function (e) {
      dlg.style.marginLeft = '0px';
      dlg.style.marginTop = '0px';

      // 限制dialog在可视区域内拖动
      if (e.pageX >= 0 && e.pageX <= window.innerWidth) {
        dlg.style.left = (e.pageX - dlg.offsetX) + 'px';
      }
      if (e.pageY >= 0 && e.pageY <= window.innerHeight) {
        dlg.style.top = (e.pageY - dlg.offsetY) + 'px';
      }
    };
    let up = function () {
      removeEventListener('mousemove', move);
      removeEventListener('mouseup', up);
    };
    let down = function (e) {
      dlg.offsetX = (e.pageX - dlg.offsetLeft);
      dlg.offsetY = (e.pageY - dlg.offsetTop);

      addEventListener('mousemove', move);
      addEventListener('mouseup', up);
    };
    header.addEventListener('mousedown', down);

    // 在dialog初始化后添加对应指令的className
    vnode.context.$nextTick(() => {
      dlg.parentNode.className = `${dlg.parentNode.className} bf-drag`;
    });
  },
  update: drag_resize_update
});

Vue.directive('bf-resize', {
  bind(el, binding, vnode) {
    // 解构指令表达式对象，并设置相关属性和方法的默认值
    let {
      width = 40,
      height = 40,
      resize = () => {
      }
    } = binding.value;

    // 获取dialog元素
    let dlg = el.getElementsByClassName("el-dialog")[0];

    // 创建resize相关元素
    let resize_e = document.createElement('div');
    resize_e.className = "ui-resizable-handle ui-resizable-e";

    let resize_s = document.createElement('div');
    resize_s.className = "ui-resizable-handle ui-resizable-s";

    let resize_se = document.createElement('div');
    resize_se.className = "ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se";

    // 设置resize相关事件
    let _resize = function () {
      if (dlg.offsetWidth <= width && dlg.offsetHeight <= height) {
        return
      }
      resize({
        width: dlg.offsetWidth,
        height: dlg.offsetHeight
      });
    };
    let _moveX = function (e) {
      // if (e.pageX % 2 != 0) {
      //   return
      // }
      dlg.style.width = (e.pageX - dlg.offsetLeft) + 'px';
      if (dlg.offsetWidth <= width) {
        dlg.style.width = width + 'px';
      }
    };
    let moveX = function (e) {
      _moveX(e);
      _resize();
    };
    let _moveY = function (e) {
      // if (e.pageY % 2 != 0) {
      //   return
      // }
      dlg.style.height = (e.pageY - dlg.offsetTop) + 'px';
      if (dlg.offsetHeight <= height) {
        dlg.style.height = height + 'px';
        return
      }
    };
    let moveY = function (e) {
      _moveY(e);
      _resize();
    };
    let move = function (e) {
      _moveX(e);
      _moveY(e);
      _resize();
    };
    let up = function () {
      removeEventListener('mousemove', moveX);
      removeEventListener('mousemove', moveY);
      removeEventListener('mousemove', move);
      removeEventListener('mouseup', up);
      dlg.parentNode.className = dlg.parentNode.className.replace(/(\s{0,1})bf-resizing/i, "");
    };
    let down = function (e) {
      let target = e.target;
      if (target == resize_e) {
        addEventListener('mousemove', moveX);
      }
      if (target == resize_s) {
        addEventListener('mousemove', moveY);
      }
      if (target == resize_se) {
        addEventListener('mousemove', move);
      }
      addEventListener('mouseup', up);

      dlg.parentNode.className = `${dlg.parentNode.className} bf-resizing`;
      dlg.style.left = dlg.offsetLeft + 'px';
      dlg.style.top = dlg.offsetTop + 'px';
      dlg.style.marginTop = 0;
      dlg.style.marginLeft = 0;
    };

    // 监听resize元素mousedown事件
    resize_e.addEventListener('mousedown', down);
    resize_s.addEventListener('mousedown', down);
    resize_se.addEventListener('mousedown', down);

    // 将resize元素添加到dialog中
    dlg.appendChild(resize_e);
    dlg.appendChild(resize_s);
    dlg.appendChild(resize_se);

    // 在dialog初始化后，给父元素添加对应指令的className
    vnode.context.$nextTick(() => {
      dlg.parentNode.className = `${dlg.parentNode.className} bf-resize`;
    });
  },
  update: drag_resize_update
});

export default null;
